<!--  -->
<template>
  <div class="agent">
    <!-- 添加 -->
    <el-button class="tian" type="text" @click="centerDialogVisible = true"
      >添 加</el-button
    >
    <!-- 添加弹框 -->
    <el-dialog
      title="添加"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div class="shezhi">
        <div class="she">
          设置代理商新增
        </div>
        <table border="1" width="100%" cellspacing="0" cellpadding="5">
          <tr>
            <td>代理名称</td>
            <td>
              <input type="text" v-model="name" />
            </td>
          </tr>
          <tr>
            <td>背景色</td>
            <td>
              <select name="" id="">
                <option value="">请选择</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>图标</td>
            <td>
              <input type="text" v-model="icon" />
            </td>
          </tr>
          <tr>
            <td>状态</td>
            <td>
              <input type="text" v-model="state" />
            </td>
          </tr>
        </table>

        <div class="she">
          成为代理商条件
        </div>
        <table border="1" width="100%" cellspacing="0" cellpadding="5">
          <tr>
            <td>直推粉丝</td>
            <td><input type="text" /></td>
          </tr>
          <tr>
            <td>非直推粉丝</td>
            <td><input type="text" /></td>
          </tr>
          <tr>
            <td>推粉丝数消费额</td>
            <td><input type="text" /></td>
          </tr>
        </table>

        <div class="she">
          获得权益
        </div>
        <table border="1" width="100%" cellspacing="0" cellpadding="5">
          <tr>
            <td>自购省钱</td>
            <td><input type="text" v-model="proportion" />%</td>
          </tr>
          <tr>
            <td>一级分佣</td>
            <td><input type="text" v-model="onelevel" />%</td>
          </tr>
          <tr>
            <td>二级分佣</td>
            <td><input type="text" v-model="secondlevel" />%</td>
          </tr>
          <tr>
            <td>三级分佣</td>
            <td><input type="text" v-model="tertiary" />%</td>
          </tr>
          <tr>
            <td>权益说明</td>
            <td>
              <textarea name="" id="" cols="10" rows="5"></textarea>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Submit">
          提 交
        </el-button>
      </span>
    </el-dialog>
    <!-- 增删改查 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column label="ID" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.icon" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="自购比例" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.proportion }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="一级" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.onelevel }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="二级" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.secondlevel }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="三级" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.tertiary }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdits(scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope)">
            <i class="el-icon-delete"> </i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑"
      :visible.sync="centerDialogVisibles"
      width="30%"
      center
    >
      <div class="shezhi">
        <div class="she">
          代理商信息
        </div>
        <table border="1" width="100%" cellspacing="0" cellpadding="5">
          <tr>
            <td>代理名称</td>
            <td><input type="text" v-model="name" /></td>
          </tr>
          <tr>
            <td>图标</td>
            <td>
              <input type="text" v-model="icon" />
            </td>
          </tr>
          <tr>
            <td>自购比例</td>
            <td>
              <input type="text" v-model="proportion" />
            </td>
          </tr>
          <tr>
            <td>一级分佣</td>
            <td><input type="text" v-model="onelevel" />%</td>
          </tr>
          <tr>
            <td>二级分佣</td>
            <td><input type="text" v-model="secondlevel" />%</td>
          </tr>
          <tr>
            <td>三级分佣</td>
            <td><input type="text" v-model="tertiary" />%</td>
          </tr>
          <tr>
            <td>权益说明</td>
            <td>
              <input type="text" v-model="state" />
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submiter()">
          提 交
        </el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      centerDialogVisible: false,
      centerDialogVisibles: false,

      icon: "",
      name: "",
      proportion: "",
      onelevel: "",
      secondlevel: "",
      tertiary: "",
      state: "",
      id: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["list"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapActions(["getList", "del", "add", "edit"]),
    handleEdit(index, row) {
      console.log(index, row);
    },
    // 删除
    handleDelete(scope) {
      this.del({
        id: scope.row.id,
      });
      this.getList();
    },
    // 添加
    Submit() {
      this.centerDialogVisible = false;
      this.add({
        icon: this.icon,
        name: this.name,
        proportion: this.proportion,
        onelevel: this.onelevel,
        secondlevel: this.secondlevel,
        tertiary: this.tertiary,
        state: this.state,
      });
      this.getList();
      this.name = "";
      this.proportion = "";
      this.onelevel = "";
      this.secondlevel = "";
      this.tertiary = "";
      this.icon = "";
      this.state = "";
    },

    // 编辑
    handleEdits(row) {
      console.log(row);
      this.centerDialogVisibles = true;
      this.icon = row.icon;
      this.name = row.name;
      this.onelevel = row.onelevel;
      this.proportion = row.proportion;
      this.secondlevel = row.secondlevel;
      this.state = row.state;
      this.tertiary = row.tertiary;
      this.id = row.id;
    },
    submiter() {
      this.edit({
        icon: this.icon,
        name: this.name,
        onelevel: this.onelevel,
        proportion: this.proportion,
        secondlevel: this.secondlevel,
        state: this.state,
        tertiary: this.tertiary,
        id: this.id,
      });
      (this.centerDialogVisibles = false), this.getList();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.agent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .tian {
    width: 80px;
    margin: 0 0 10px 0;
    background: #67adf6;
    color: #fff;
    border-radius: 10px;
  }
  .shezhi {
    width: 100%;
    .she {
      width: 100%;
      height: 30px;
      border-bottom: 1px solid #ccc;
      line-height: 30px;
      padding: 0 10px;
      background: #eee;
      border: 1px solid #999;
      border-bottom: none;
    }
    table {
      border: 1px solid #ccc;
      tr {
        height: 30px;

        td {
          padding: 0 5px;
          width: 50%;
          input {
            width: 100px;
          }
          button {
            width: 60px;
            height: 20px;
            background: #67adf6;
            color: #fff;
            border: none;
            border-radius: 5px;
          }
          select {
            width: 100px;
            padding: 0 5px;
          }
        }
      }
    }
  }
}
img {
  width: 50px;
  height: 50px;
}
.block {
  background: #fff;
  text-align: right;
  padding: 10px 20px;
}
.el-icon-edit {
  color: #67adf6;
}
</style>
